<template>
	<view class="theater-group-card">
		<view class="top-big">
			<BigCard :card-detail="groupData" />
		</view>

		<view class="bottom-list">
			<template v-for="(item, index) in groupData.list" :key="index">
				<SmallCard :card-detail="item" />
			</template>
		</view>
	</view>
</template>

<script setup>
	import BigCard from '@/components/big-card/big-card.vue';
	import SmallCard from '@/components/small-card/small-card.vue';

	defineProps({
		groupData: Object
	});
</script>

<style lang="scss">
	.theater-group-card {
		margin-bottom: 40rpx;

		.bottom-list {
			width: 100%;
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			grid-column-gap: 30rpx;
			grid-row-gap: 40rpx;
			margin-top: 40rpx;
		}
	}
</style>
